<template>
    <div class="login">
        <div class="left-side fl">
            <LocaleSetting class="locale-setting" />
            <div class="login-module">
                <div class="hy-font">{{ t('login.greeting') }}</div>
                <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top">
                    <div class="login-font mt30">{{ t('login.account') }}</div>
                    <ElFormItem label="" prop="username">
                        <ElInput v-model="ruleForm.username" placeholder=""></ElInput>
                    </ElFormItem>
                    <div class="login-font">{{ t('login.password') }}</div>
                    <ElFormItem label="" prop="password">
                        <ElInput v-model="ruleForm.password" type="password" autocomplete="off"></ElInput>
                    </ElFormItem>
                    <div class="clearfix">
                        <ElLink class="fl" :underline="false">{{ t('login.forgotPassword') }}</ElLink>
                        <ElLink
                            v-logAction="{
                                page: '/login',
                                item: 'register',
                                descriptions: '用户点击注册按钮',
                            }"
                            class="fr"
                            :underline="false"
                            @click="register"
                        >
                            {{ t('login.register') }}
                        </ElLink>
                    </div>
                </ElForm>
                <div class="mt20">
                    <ElButton
                        v-logAction="{
                            page: '/login',
                            item: 'login',
                            descriptions: '用户点击登录按钮',
                        }"
                        class="login-button"
                        size="large"
                        @click="login(ruleFormRef)"
                    >
                        {{ t('login.loginBtn') }}
                    </ElButton>
                </div>
            </div>
        </div>
        <div class="right-side fr clearfix">
            <img class="right-side-img" src="../../assets/image/租户.png" alt="" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { setCookie, deleteCookie, debounce } from '@/utils/utils';
import { userLogin } from '@/api/api.query.util';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { initTheme, getTenantStyle } from '../Home/menuConfig';
import { t, onLocaleChanged } from '@/i18n';
import LocaleSetting from '@/components/LocaleSetting.vue';

const ruleFormRef = ref<FormInstance>();

const router = useRouter();
const ruleForm = reactive({
    username: '',
    password: '',
});
deleteCookie('SaaS_Token');
const rules = ref(getRules());
// 语言变化时，rules 提示语句也要跟着更改
onLocaleChanged(() => {
    rules.value = getRules();
});

function getRules() {
    return {
        username: [
            {
                required: true,
                message: t('login.accountEmptyTip'),
                trigger: 'change',
            },
        ],
        password: [
            {
                required: true,
                message: t('login.passwordEmptyTip'),
                trigger: 'change',
            },
        ],
    };
}

initTheme();

const login = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    const themeDta = await getTenantStyle();
    // 表单校验
    formEl.validate((valid) => {
        if (valid) {
            debounce(() => {
                userLogin({
                    method: 'post',
                    data: {
                        userName: ruleForm.username,
                        password: ruleForm.password,
                        accountType: 3, // 租户accountType为3
                    },
                }).then((res) => {
                    // 登录成功弹窗
                    ElMessage({
                        message: t('login.loginSuccessful'),
                        type: 'success',
                    });
                    if (!themeDta.result) {
                        router.push({ name: '/change-theme' });
                    } else {
                        router.push({ name: '/home/service-management' });
                    }
                    setCookie('SaaS_Token', res.result);
                    setCookie('user_name', ruleForm.username);
                });
            }, 500);
            return valid;
        }
        return false;
    });
};

// 注册
function register() {
    router.push({ path: '/mailBox-test' });
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
}
.left-side {
    width: 50%;
    height: 100%;
    position: relative;
}
.login-module {
    position: absolute;
    top: 27%;
    left: 27%;
    width: 46%;
    margin: 0 auto;
}
.hy-font {
    font-size: 32px;
    color: #333333;
    line-height: 32px;
}
.login-font {
    font-size: 14px;
    line-height: 14px;
    display: inline-block;
    margin-bottom: 5px;
}
.login-input {
    height: 5%;
    width: 100%;
    display: block;
}
.login-button {
    background-color: var(--prmary-color);
    width: 100%;
    color: #ffffff;
}
.right-side {
    width: 50%;
    height: 100%;
}
.right-side-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.locale-setting {
    position: absolute;
    top: 20px;
    right: 20px;
}
</style>
